import React, { useState, useRef } from 'react';
import Input, { InputProps } from './input';
import Icon from '../Icon/icon';

export interface PasswordProps extends InputProps {
  iconRender?: (visible: boolean) => React.ReactNode;
  visibilityToggle?: boolean;
}

const Password: React.FC<PasswordProps> = ({
  iconRender = visible => visible ? <Icon icon="eye" /> : <Icon icon="eye-slash" />,
  visibilityToggle = true,
  className,
  ...rest
}) => {
  const [visible, setVisible] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div className="input-password">
      <Input
        ref={inputRef}
        type={visible ? 'text' : 'password'}
        className={`input ${className || ''}`}
        {...rest}
      />
      {visibilityToggle && (
        <span
          className="input-password-icon"
          onClick={() => setVisible(v => !v)}
        >
          {iconRender(visible)}
        </span>
      )}
    </div>
  );
};

export default Password; 